<%--
  @desc: 实时路况
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="format-detection" content="telephone=no">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <link rel="stylesheet" type="text/css" href="<c:url value='/resource/weixin/css/global.css'/>">
 <script src="<c:url value='/resource/weixin/js/jquery-1.8.3.min.js'/>"></script>
<script src="<c:url value='/resource/weixin/js/main.js'/>"></script>
<script>
	$(document).ready(function(e) {
        $(".toggle_div>img").click(function(e) {
             var src=$(this).attr("src");
			 CreatedvImg(src);
        });
    });

    function collection(monitorId,target){
        var openId = '${member.openId}';
        $.post("<c:url value='/weixin/bmsrv/lkcx/collect'/>",{'monitorId': monitorId, 'openId': openId, 'time':Math.random()}, function (resp) {
            if (resp) {
                var clazz = target.className;
                if(clazz.indexOf("star1") != -1){
                    $(target).removeClass("star1").addClass("star2");
                }else{
                    $(target).removeClass("star2").addClass("star1");
                }
                alert(resp.msg);
            }
        }, "json");
    }
</script>
<title>实时路况</title>
</head>

<body>
<ul class="tab_menu tab_menu_1 clearfix">
    <li class="menu_li_current" style="width: 100%;"><a href="<c:url value='/weixin/bmsrv/lkcx'/>">实时路况</a></li>
    <%--<li><a href="<c:url value='/weixin/loadmap'/>?searchname=-1&searchid=-1&maplng=-1&maplat=-1">便民地图</a></li>--%>
    <%--<li><a href="<c:url value='/weixin/bmsrv/park'/>">停车位查询</a></li>--%>
</ul> 
<!--wrap-page-->
<div class="wrap-page" style="top:25px;">
  <!--路名-->
  <div class="row">
  	<ul class="road clearfix">
    	<li <c:if test="${roadId eq 'renmin'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=renmin'/>">人民路</a></li>
        <%--<li <c:if test="${roadId eq 'changchun'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=changchun'/>">长春路</a></li>--%>
        <li <c:if test="${roadId eq 'shanghai'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=shanghai'/>">上海路</a></li>
        <li <c:if test="${roadId eq 'taiping'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=taiping'/>">太平路</a></li>
        <%--<li <c:if test="${roadId eq 'dongcang'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=dongcang'/>">东仓路</a></li>--%>
        <%--<li <c:if test="${roadId eq 'funan'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=funan'/>">府南路</a></li>--%>
        <%--<li <c:if test="${roadId eq 'loujiang'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=loujiang'/>">娄江路</a></li>--%>
        <li <c:if test="${roadId eq 'xianfu'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=xianfu'/>">县府街</a></li>
        <li <c:if test="${roadId eq 'xinhua'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=xinhua'/>">新华路</a></li>
        <li <c:if test="${roadId eq 'zhenghe'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=zhenghe'/>">郑和路</a></li>
        <li <c:if test="${roadId eq 'qita'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=qita'/>">其他</a></li>
        <li <c:if test="${roadId eq 'mine'}">class="road_current_li"</c:if>><a href="<c:url value='/weixin/bmsrv/lkcx?roadId=mine'/>">我的收藏</a></li>
    </ul>
  </div>
  <!--路况-->
  <div class="row">
  	<ul class="road_detail">
        <%--<li>
        	<div class="top"><span class="r_name">人民路南洋广场出口</span><span class="onoff onoff1"></span><span class="star star1"></span></div>
        	<div class="toggle_div">
       	    	<img src="<c:url value='/resource/weixin/images/road3.jpg'/>" width="1280" height="720"> 
            </div>
        </li>
        <li>
        	<div class="top"><span class="r_name">人民路上海路口</span><span class="star star1"></span></div>
        	<div class="toggle_div">
       	    	<img src="<c:url value='/resource/weixin/images/road3.jpg'/>" width="1280" height="720"> 
            </div>
        </li>
        <li>
        	<div class="top"><span class="r_name">人民路县府路口</span><span class="star star1"></span></div>
        	<div class="toggle_div">
       	    	<img src="<c:url value='/resource/weixin/images/road3.jpg'/>" width="1280" height="720"> 
            </div>
        </li>
        <li>
        	<div class="top"><span class="r_name">人民路县府路口</span><span class="star star1"></span></div>
        	<div class="toggle_div">
       	    	<img src="<c:url value='/resource/weixin/images/road3.jpg'/>" width="1280" height="720"> 
            </div>
        </li>
        <li>
        	<div class="top"><span class="r_name">人民路县府路口</span><span class="star star1"></span></div>
        	<div class="toggle_div">
       	    	<img src="<c:url value='/resource/weixin/images/road3.jpg'/>" width="1280" height="720"> 
            </div>
        </li>
        <li>
        	<div class="top"><span class="r_name">人民路县府路口</span><span class="star star1"></span></div>
        	<div class="toggle_div">
       	    	<img src="<c:url value='/resource/weixin/images/road3.jpg'/>" width="1280" height="720"> 
            </div>
        </li>--%>
        <c:forEach var="monitor" items="${monitorList}" varStatus="vs">
            <li>
                <div class="top">
                    <span class="r_name">${monitor.monitorName}</span>
                    <span class="onoff onoff1"></span>
                    <c:if test="${monitor.ifCollected eq 'true'}"><span class="star star2" onclick="javascript:collection('${monitor.monitorId}',this);"></span></c:if>
                    <c:if test="${monitor.ifCollected eq 'false' && roadId ne 'mine'}"><span class="star star1" onclick="javascript:collection('${monitor.monitorId}',this);"></span></c:if>

                </div>
                <div class="toggle_div">
                    <img src="data:image/jpg;base64,${monitor.imgBase64}" width="1280" height="720"/>
                </div>
            </li>
        </c:forEach>
    </ul>
  </div>
  
</div>

</body>
</html>
